import React, { Component } from 'react'
import { getEchartData } from 'utils/Api'
import PropTypes from 'prop-types'
import getDefaultOption from '../GenOptions'
import Modals from './Modals'
import { Button } from 'antd'


class FarmlandWeather extends Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      res: {},
      disable: true
    }
  }
  componentDidMount() {
    this.echart = this.update()
    window.addEventListener('resize', () => {
      this.echart.resize({
        width: 'auto'
      })
    })
    this.props.callback(this.echart)
    this.echart.resize({
      width: document.querySelector('.echart').offsetWidth - 400 + 'px'
    })
  }
  componentDidUpdate(prevProps, prevState) {
    const { leftCollapsed, rightCollapsed } = this.props
    if (leftCollapsed !== prevProps.leftCollapsed) {
      this.echart.resize({
        width: document.querySelector('.echart').offsetWidth + (leftCollapsed ? 150 : (-150)) + 'px'
      })
      return
    }
    if (rightCollapsed !== prevProps.rightCollapsed) {
      this.echart.resize({
        width: document.querySelector('.echart').offsetWidth + (rightCollapsed ? 250 : (-250)) + 'px'
      })
      return
    }
    const { startDate, endDate } = this.props
    if (!prevProps.startDate.isSame(startDate) || !prevProps.endDate.isSame(endDate)) {
      this.update()
      return
    }
  }
  update = () => {
    const { startDate, endDate, landId, start, end } = this.props
    console.log(start, end)
    this.farmlandWeather2 = echarts.init(this.farmlandWeather)
    this.farmlandWeather2.showLoading({
      text: '加载中',
      color: '#c23531',
      textColor: '#000',
      maskColor: '#fff',
      zlevel: 0,
    })
    getEchartData({
      landId,
      startDate: startDate.format('YYYY/MM/DD'),
      endDate: endDate.format('YYYY/MM/DD')
    })
      .then(({ msg, result: { dates, pcpn, irrigations, total }}) => {
        if (msg === '200') {
          this.setState({
            res: {
              dates/*: dates.map(date => date.slice(5))*/,
              pcpn,
              irrigations
            },
            disable: false
          })
          this.farmlandWeather2.hideLoading()
          this.farmlandWeather2.setOption(
            { ...getDefaultOption('降水+灌溉(mm)', 
              ['降雨量', '灌溉量', '总灌溉量'],
              dates.map(date => date.slice(5)),
              [{
                name: '降雨量',
                smooth: true,
                data: pcpn,
                itemStyle: {
                  normal: {
                    color: '#9a72e0',
                    lineStyle: {
                      width: 1,
                      color: '#9a72e0',
                    }
                  }
                },
                type: 'line',
              }, {
                name: '灌溉量',
                smooth: true,
                data: irrigations,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 1
                    }
                  }
                },
                type: 'line',
              }, {
                name: '总灌溉量',
                smooth: true,
                data: total,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 1
                    }
                  }
                },
                type: 'line',
              }], function(value) {
                return  value
              }, true, 80, false), grid: {
              top: 30,
              left: '7%',
              right: '7%',
            }, legend: {
              data: ['降雨量', '灌溉量', '总灌溉量'],
              selected: {
                '总灌溉量': false,
              }
            }, dataZoom: {
              type: 'slider',
              show: true,
              disabled: true,
              xAxisIndex: [0],
              start,
              end,
            }}
          )
        }
      })
    return this.farmlandWeather2
  }
  handleModal = () => {
    if (!this.state.visible) {
      this.setState({
        visible: true
      })
    }
  }
  closeModal = () => {
    this.setState({
      visible: false
    })
  }
  render() {
    const { visible, disable } = this.state
    // const { leftCollapsed, rightCollapsed } = this.props
    return <div
      className='farmland-weather'
    >
      <Modals visible={visible} closeModal={this.closeModal} {...this.props} {...this.state}/>
      <Button type="primary" size="small" onClick={this.handleModal} disabled={disable} >编辑</Button>
      
      <div className='echart'
        id='farmlandWeather'
        ref={farmlandWeather => this.farmlandWeather = farmlandWeather}></div>
    </div>
  }
}

FarmlandWeather.propTypes = {
  landId: PropTypes.string,
  leftCollapsed: PropTypes.bool,
  rightCollapsed: PropTypes.bool,
  startDate: PropTypes.object,
  endDate: PropTypes.object,
  callback: PropTypes.func,
  dateChangeEnd: PropTypes.bool,
  start: PropTypes.number,
  end: PropTypes.number,
}

export default FarmlandWeather